<template>
    <div class="rank">
        <header id="header">
            <a href="javascript:history.go(-1)" class="back">
                <div class="iconfont icon-back"></div>
            </a>
            <h1 class="title">排行榜</h1>
            <nav class="sexbtn">
                <h3>
                    <a href="#" class="btn-tab active">男生</a>
                </h3>
                <h3>
                    <a href="#" class="btn-tab">女生</a>
                </h3>
            </nav>
            <div class="operate">
                <router-link to="/search" tag="span"  class="iconfont icon-search"></router-link>
                <span href="#" class="iconfont icon-menu"></span>
            </div>
        </header> 
        <div class="rankcontent" v-if="ranklistmale[0]">
            <div class="rankitem" v-for="(item,index) in ranklistmale" :key="index" >
                <a  class="rankimg">
                    <img src="https://qidian.gtimg.com/qdm/img/rank/rank-bg-1.c077f.jpg" alt="">
                    <h2 class="ranktitle">{{item.shortTitle}}</h2>
                    <i class="iconfont icon-quanyou"></i>
                </a>
                <ol>                    
                    <li class="bookitem" v-for="(i,k) in item.books" :key="k">
                        <router-link :to="{path:'/detail',query:{id:i._id}}">
                            <h3>{{i.title}}</h3>
                            <span class="iconfont icon-you"></span>
                        </router-link>
                    </li>                    
                </ol>
            </div>
        </div>
    </div>
</template>
<script>
// import {getRanktype} from '../api/index.js'
import {getRanktype,getRanking} from '../api/index.js'
export default {
    data() {
        return {
            ranklistmale:[
// {title:"月票榜",titlesrc:"https://m.qidian.com/book/1021617576",picsrc:"https://qidian.gtimg.com/qdm/img/rank/rank-bg-1.c077f.jpg",booklist:["夜的命名术","不科学御兽","我有一棵神话树","从红月开始","我就是不按套路出牌"]},
// {title:"畅销榜",titlesrc:"https://m.qidian.com/book/1021617576",picsrc:"https://qidian.gtimg.com/qdm/img/rank/rank-bg-2.868f8.jpg",booklist:["夜的命名术","大奉打更人","我有一棵神话树","深空彼岸","从红月开始"]},
// {title:"阅读榜",titlesrc:"https://m.qidian.com/book/1021617576",picsrc:"https://qidian.gtimg.com/qdm/img/rank/rank-bg-11.d5b17.jpg",booklist:["夜的命名术","大奉打更人","不科学御兽","深空彼岸","从红月开始"]},
// {title:"粉丝榜",titlesrc:"https://m.qidian.com/book/1029006481",picsrc:"https://qidian.gtimg.com/qdm/img/rank/rank-bg-3.cd1bc.jpg",booklist:["不科学御兽","夜的命名术","我有一棵神话树","大奉打更人","大秦，造反被祖龙窃听心声"]},
// {title:"推荐榜",titlesrc:"https://m.qidian.com/book/1016534035",picsrc:"https://qidian.gtimg.com/qdm/img/rank/rank-bg-4.b5dae.jpg",booklist:["大梦主","星门","这个人仙太过正经","这些妖怪太难敕封了","斗罗大陆V重生唐三"]},
// {title:"打赏榜",titlesrc:"https://m.qidian.com/book/1021617576",picsrc:"https://qidian.gtimg.com/qdm/img/rank/rank-bg-5.5e078.jpg",booklist:["夜的命名术","黑暗血时代","深空彼岸","赤心巡天","全职艺术家"]},
// {title:"更新榜",titlesrc:"https://m.qidian.com/book/1027214690",picsrc:"https://qidian.gtimg.com/qdm/img/rank/rank-bg-6.e2ab8.jpg",booklist:["重生NBA之最强天赋","神秘复苏之诡话连篇","我在末日有台SCV","我以灵植净化诸天","圣旨赐死当天，我入陆地神仙"]},
// {title:"签约榜",titlesrc:"https://m.qidian.com/book/1020730987",picsrc:"https://qidian.gtimg.com/qdm/img/rank/rank-bg-10.bdd56.jpg",booklist:["第九关","虚拟尽头","我的弟子都是气运之子","这游戏也太真实了","假如被巫女缠住"]},
// {title:"新书榜",titlesrc:"https://m.qidian.com/book/1029551237",picsrc:"https://qidian.gtimg.com/qdm/img/rank/rank-bg-11.d5b17.jpg",booklist:["牧灵图录","异界恋爱之旅","九御传","开局高冷校花想做我女仆","我有一颗陨铁心脏"]},
// {title:"新人榜",titlesrc:"https://m.qidian.com/book/1029651193",picsrc:"https://qidian.gtimg.com/qdm/img/rank/rank-bg-12.c7185.jpg",booklist:["极夜边缘","王者时代：英雄书卷","我真的不喜欢吃窝边草","我成了恋爱游戏中的反派","C级混血种被迫屠龙"]},

]
        }
    },
    methods: {
        getRankingFun(){
            getRanktype().then(data=>{
                // console.log(data);
                let list = data.male;
                list.forEach(element => {
                    getRanking(element._id).then(data=>{
                        // console.log(data);
                        element.books=data.ranking.books.splice(0,5);
                        this.$forceUpdate();
                    })
                });
                
                // this.$set(this.ranklistmale,0,list);
                
                this.ranklistmale = list
                
            })
            this.$forceUpdate();
        }
    },
    created(){
        this.getRankingFun();
    },
    
}
</script>
<style lang="less">
.rank{
    #header{
    position: relative;
    box-sizing: border-box;
    height: 2.75rem;
    padding-top: .6875rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid #f0f1f2;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    .back{
        display: inline-block;
        padding-left: 12px;
        .iconfont{
            font-size: 18px;
        }
    }
    .title{
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.375rem;
    position: absolute;
    left: 2.6875rem;
    overflow: hidden;
    max-width: 60%;
    white-space: nowrap;
    text-overflow: ellipsis;
    }
    .btn-tab{
    font-size: .8125rem;
    
    display: block;
    line-height: 1.6875rem;
    padding: 0 .75rem !important;
    text-align: center;
    color: #ed424b;
    border: 1px solid #ed424b;
    font-weight: normal !important;
}
    .sexbtn>h3:last-child>.btn-tab{
    border-radius: 0 4px 4px 0;
}
.sexbtn>h3:first-child>.btn-tab{
    border-radius: 4px 0 0 4px;
}
.active{
    color: #fff;
    background-color: #ed424b;
}
.sexbtn{
    display: flex;
    // margin-top: -4px;
    // margin-left: 40px;
    position: absolute;
    top: 21%;
    left: 37%;
    a{
        // font-size: 14px;
        font-weight: normal;
    }
}
.logo-a{
    padding: 0 1rem;
}
.logo{
    font-size: 18px;
    color: black;   
}
.operate{
    height: 2rem;
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    line-height: 1.5rem;
    // padding: .25rem .375rem;
    // margin-left: 68px;
    /* margin-top: 4px; */
}
.operate span{
    display: inline-block;
    height: 24px;
    width: 24px;
    /* background-color: red; */
    margin-right: 6px;
    font-size: 16px;
    // color: #ed424b;
}
.operate span:last-child{
    font-size: 24px;
}
}
}
.rankcontent{
    .rankitem{
        // height: 12rem;
    margin: .75rem 0;
    margin-top: 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    .rankimg{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 7.5rem;
    img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
    h2{
    font: normal 1.75rem/1.375rem KUHEI;
    position: absolute;
    right: 0;
    bottom: 6rem;
    left: 0;
    -webkit-transform: scaleY(1.2);
    transform: scaleY(1.2);
    text-align: center;
    color: #fff;
    }
    i{
    position: absolute;
    right: 0;
    bottom: 2rem;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: auto;
    color: #fff;
    }
    }
    ol{
    overflow: hidden;
    margin-left: 7.5rem;
    padding-left: 2.125rem;
    counter-reset: bookrank;
    li{
        position: relative;
        box-shadow: 0 1px #f0f1f2;
        
        a{
            display: flex;
                font-size: .875rem;
    line-height: 1.5rem;
    margin-left: -2.125rem;
    padding: .375rem 1rem .375rem 2.375rem;
    justify-content: space-between;
    h3{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    }
    h2{
            font: normal 1.75rem/1.375rem KUHEI;
    position: absolute;
    right: 0;
    bottom: 6rem;
    left: 0;
    -webkit-transform: scaleY(1.2);
    transform: scaleY(1.2);
    text-align: center;
    color: #fff;
    }
        }
    }
    }
        }

    .bookitem::before{
            font: bold 1em/1.5em 'DIN Alternate';
            position: absolute;
            top: 0;
            bottom: 0;
            left: -1.125rem;
            height: 1.5em;
            margin: auto;
            counter-increment: bookrank;
            content: counter(bookrank) '.';           
        }
}
</style>